<template>
    <!--  外部Div  -->
    <view class="tab-bar">
        <!--  循环每个 item 菜单 -->
        <view v-for="(item, index) in tabBarList" :key="index"
            :class="{ 'tab-bar-item': true, currentTar: selected == item.id }" @click="switchTab(item, index)">
            <view class="tab_text" :style="{ color: selected == index ? selectedColor : color }">
                <image class="tab_img" :src="selected == index ? item.selectedIconPath : item.iconPath"></image>
                <view>{{ item.text }}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps, ref } from 'vue'

uni.hideTabBar();
// 子组件传递参数
const props = defineProps({
    selected: {
        type: Number,
        default: 0
    }
})

// 为选中颜色
let color = ref('#000')
// 选中的颜色
let selectedColor = ref('#ffb2b2')
// 菜单栏集合 - 与 pages.json -> tabbar 配置一样
let tabBarList = ref([
    {
        "id": 0,
        "pagePath": "/pages/index/index",
        "iconPath": "../../static/icon/icon_2.png",
        "selectedIconPath": "../../static/icon/icon_2.png",
        "text": "购买课程"
    },
    {
        "id": 1,
        "pagePath": "/pages/order/order",
        "iconPath": "../../static/icon/gm_1.png",
        "selectedIconPath": "../../static/icon/gm_1.png",
        "text": "我的订单"
    },
    {
        "id": 2,
        "pagePath": "/pages/about/about",
        "iconPath": "../../static/icon/about_3.png",
        "selectedIconPath": "../../static/icon/about_3.png",
        "text": "关于"
    }
])

// 跳转tabBar菜单栏
const switchTab = (item) => {
    let url = item.pagePath;
    uni.switchTab({
        url
    })
}
</script>
